<template>
    <view class="page-body">
        <view class="reack_box">
            <view class="zuobiao_box">
                <image src="https://rubbish.lwjcg.com/static/index/dz.png" mode="widthFix" />
            </view>
            <view class="wenzi_box">用户订单</view>
        </view>
        <view class="reack1_box">
            <view class="zuobiao1_box">
                <image src="https://rubbish.lwjcg.com/static/index/zzdz.png" mode="widthFix" />
            </view>
            <view class="wenzi1_box">站点</view>
        </view>
        <map id="map" :latitude="latitude" :longitude="longitude" :markers="covers" @regionchange="mapChange" scale="13"
            @markertap="markertap" @callouttap="markertap">
            <!-- <cover-view slot="callout">
                <block v-for="(item, index) in covers" :key="index">
                    <cover-view class="customCallout" :marker-id="item.id">
                        <cover-view class="image_box">
                            <cover-image class="image1" :src="item.picPath" mode="scaleToFill" />
                        </cover-view>
                        <cover-view class="touxiang_box">
                            <cover-image class="image2" :src="item.avatar" mode="scaleToFill" />
                        </cover-view>
                    </cover-view>
                </block>
            </cover-view> -->
        </map>
        <view class="exhibiting_box" v-if="JSON.stringify(orderMes) != '{}' && orderMes.flag == '1'">
            <view class="guanbi_box" @click="guanbi"></view>
            <view class="left_box">
                <view class="touxiang_box">
                    <image :src="orderMes.avatar" mode="scaleToFill" />
                </view>
                <view class="u_name_box">{{ orderMes.nickname }}</view>
            </view>
            <view class="xinxi_text_box">
                <view class="u_name_box">预估总金额{{ orderMes.estimate_total_money }}元</view>

                <view class="shijian_fs_box">
                    {{ orderMes.product_name }}-预约{{ orderMes.num }}{{ orderMes.category_name }}
                </view>
                <view class="shijian_fs_box">
                    预约时间：{{ orderMes.appointment_time }}
                </view>
            </view>
        </view>
        <view class="exhibiting1_box" v-if="JSON.stringify(orderMes) != '{}' && orderMes.flag == '2'">
            <view class="guanbi1_box" @click="guanbi"></view>
            <view class="left1_box">
                <view class="touxiang1_box">
                    <image :src="orderMes.avatar" mode="scaleToFill" />
                </view>
            </view>
            <view class="rt1_box">
                <view class="top1_box">{{ orderMes.name }}</view>
                <view class="top2_box">
                    <view class="dizhi1_box">详细地址：</view>
                    <view class="dizhi2_box">{{ orderMes.address }}</view>
                    <view class="dizhi3_box">
                        <view class="go_box" @click.stop="txnav(orderMes)"></view>
                        <view class="daohang_txt">导航</view>
                    </view>
                </view>
                <view class="top3_box">联系电话：{{ orderMes.phone }}</view>
                <view class="top3_box">营业时间：{{ orderMes.time_period }}</view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            id: 0, // 使用 marker点击事件 需要填写id
            title: '地图',
            latitude: 34.183205,
            longitude: 108.945881,
            covers: [],
            orderMes: {},
            flag: ''
        }
    },
    onHide() {
        this.orderMes = {}
    },
    onLoad(options) {

        this.covers = []
    },
    onShow() {
        this.getLocation()
        this.mapInit()
    },
    methods: {
        guanbi() {
            this.orderMes = {}
        },
        // 点击导航
        txnav(item) {
            uni.openLocation({
                latitude: item.lat * 1,
                longitude: item.lng * 1,
                address: item.address,
                // scale: ,
                success: function () {
                    console.log('success');
                },
                fail(err) {
                    console.log(err, "errrr")
                }
            });
        },
        // 当前位置
        getLocation() {
            var that = this;
            uni.getLocation({
                isHighAccuracy: true, // 开启地图精准定位
                type: 'gcj02', // 坐标系类型
                success: function (res) {
                    that.latitude = res.latitude
                    that.longitude = res.longitude
                },
                fail: function (err) {
                    console.log(err, "errererere")
                }
            });
        },
        mapChange(e) {
            if (e.type == 'end') {
                const northeast = JSON.stringify(e.detail.region.northeast)
                const southwest = JSON.stringify(e.detail.region.southwest)
                setTimeout(() => {
                    this.mapInit(northeast, southwest)
                }, 600)
            }
        },

        mapInit(northeast, southwest) {
            let data = {
                northeast,
                southwest
            }
            this.$Request.post(this.$api.user.userMap_order, data).then(res => {
                if (res.code == 200) {
                    res.data.orders.forEach(val => {
                        if (val.flag == 1) {
                            val.latitude = val.lat
                            val.longitude = val.lng
                            val.iconPath = 'https://rubbish.lwjcg.com/static/index/dz.png'
                            val.markerId = val.id
                            val.width = '50'
                            val.height = '80'
                            val.picPath = 'https://rubbish.lwjcg.com/static/index/dzpic.png'
                            val.customCallout = {
                                anchorY: 10, // Y轴偏移量
                                anchorX: 0, // X轴偏移量
                                display: "ALWAYS" // 一直展示
                            }
                        } else {
                            val.latitude = val.lat
                            val.longitude = val.lng
                            val.iconPath = 'https://rubbish.lwjcg.com/static/index/zzdz.png'
                            val.markerId = val.id
                            val.width = '50'
                            val.height = '80'
                            val.avatar = val.img_url
                            val.picPath = 'https://rubbish.lwjcg.com/static/index/zzpic.png'
                            val.customCallout = {
                                anchorY: 10, // Y轴偏移量
                                anchorX: 0, // X轴偏移量
                                display: "ALWAYS" // 一直展示
                            }
                        }

                    });
                    this.covers = res.data.orders
                    this.$forceUpdate();
                    console.log(this.covers, "this.covers")
                }
            })
        },
        markertap(e) {
            const markerId = e.detail.markerId
            const marker = this.covers.find(m => m.id === parseInt(markerId));
            console.log(marker)
            this.orderMes = marker
        }
    }
}
</script>
<style lang="scss" scoped>
.page-body {
    width: 100vw;
    height: 100vh;
    position: relative;

    .reack_box {
        position: absolute;
        right: 0;
        top: 236rpx;
        width: 184rpx;
        height: 86rpx;
        border-radius: 76rpx 0 0 76rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 12rpx 20rpx 8rpx rgba(179, 173, 173, 0.25);
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 36rpx;

        .zuobiao_box {
            margin-top: 10rpx;
            width: 50rpx;

            image {
                width: 100%;
            }
        }

        .wenzi_box {
            width: 52rpx;
            height: 64rpx;
            opacity: 1;
            /** 文本1 */
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 32rpx;
            color: rgba(56, 56, 56, 1);

        }

    }

    .reack1_box {
        position: absolute;
        right: 0;
        top: 356rpx;
        width: 184rpx;
        height: 86rpx;
        border-radius: 76rpx 0 0 76rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 12rpx 20rpx 8rpx rgba(179, 173, 173, 0.25);
        z-index: 100;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding: 0 24rpx 0 38rpx;

        .zuobiao1_box {
            margin-top: 10rpx;
            width: 50rpx;

            image {
                width: 100%;
            }
        }

        .wenzi1_box {
            width: 52rpx;
            height: 64rpx;
            opacity: 1;
            /** 文本1 */
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 64rpx;
            color: rgba(56, 56, 56, 1);
        }

    }

    map {
        width: 100%;
        height: 100%;

        .customCallout {
            width: 52rpx;
            height: 70rpx;
            position: relative;

            .image_box {
                width: 52rpx;
                height: 70rpx;
                position: absolute;
                z-index: 1;

                .image1 {
                    width: 100%;
                    height: 100%;
                }
            }

            .touxiang_box {
                width: 44rpx;
                height: 44rpx;
                border-radius: 50%;
                position: absolute;
                top: 5rpx;
                right: 0;
                left: 0;
                margin: auto;
                z-index: 2;

                .image2 {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
        }
    }

    .exhibiting_box {
        width: 680rpx;
        height: 212rpx;
        border-radius: 30rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 12rpx 28rpx 8rpx rgba(179, 173, 173, 0.25);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10rpx;
        margin: auto;
        box-sizing: border-box;
        padding: 36rpx 24rpx;
        display: flex;
        justify-content: space-between;

        .guanbi_box {
            position: absolute;
            right: 30rpx;
            width: 22rpx;
            height: 22rpx;
            background-image: url('https://rubbish.lwjcg.com/static/index/cuo.png');
            background-size: 100% 100%;



        }

        .left_box {
            width: 150rpx;
            height: 100%;

            .touxiang_box {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                border: 2rpx solid rgba(229, 229, 229, 1);
                margin: auto;
                margin-top: 10rpx;
                margin-bottom: 10rpx;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }


            }

            .u_name_box {
                height: 50rpx;
                width: 100%;
                line-height: 50rpx;
                font-size: 30rpx;
                font-weight: 700;
                line-height: 50rpx;
                color: rgba(0, 0, 0, 1);
                margin-bottom: 8rpx;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

        }

        .xinxi_text_box {
            width: 544rpx;

            .u_name_box {
                height: 50rpx;
                width: 100%;
                line-height: 50rpx;
                font-size: 30rpx;
                font-weight: 700;
                line-height: 50rpx;
                color: rgba(0, 0, 0, 1);
                margin-bottom: 20rpx;
            }

            .shijian_fs_box {
                width: 100%;
                height: 35rpx;
                font-size: 24rpx;
                line-height: 35rpx;
                font-weight: 400;
                line-height: 40rpx;
                color: rgba(128, 128, 128, 1);
            }

        }

    }

    .exhibiting1_box {
        width: 680rpx;
        height: 312rpx;
        border-radius: 30rpx;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0rpx 12rpx 28rpx 8rpx rgba(179, 173, 173, 0.25);
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10rpx;
        margin: auto;
        box-sizing: border-box;
        padding: 36rpx 24rpx;
        display: flex;
        justify-content: space-between;

        .guanbi1_box {
            position: absolute;
            right: 30rpx;
            width: 22rpx;
            height: 22rpx;
            background-image: url('https://rubbish.lwjcg.com/static/index/cuo.png');
            background-size: 100% 100%;



        }

        .left1_box {
            width: 90rpx;
            height: 100%;

            .touxiang1_box {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                border: 2rpx solid rgba(229, 229, 229, 1);
                // margin: auto;
                margin-top: 10rpx;
                margin-right: 10rpx;
                margin-bottom: 10rpx;

                image {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                }
            }


        }

        .rt1_box {
            width: 534rpx;
            height: 100%;
            // background-color: red;

            .top1_box {
                width: 85%;
                height: 50rpx;
                line-height: 50rpx;
                font-size: 32rpx;
                font-weight: 700;
                margin-bottom: 20rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .top2_box {
                width: 100%;
                // height: 82rpx;
                display: flex;
                justify-content: space-between;
                margin-bottom: 10rpx;

                .dizhi1_box {
                    // width: 145rpx;
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(128, 128, 128, 1);
                }

                .dizhi2_box {
                    width: 330rpx;
                    height: 80rpx;
                    color: rgba(128, 128, 128, 1);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                .dizhi3_box {
                    width: 50rpx;
                    height: 80rpx;
                    font-size: 28rpx;
                    font-weight: 400;

                    .go_box {
                        width: 50rpx;
                        height: 50rpx;
                        background-image: url('https://rubbish.lwjcg.com/static/index/go.png');
                        background-size: 100% 100%;
                        margin-bottom: 5rpx;
                    }

                    .daohang_txt {
                        width: 48rpx;
                        height: 34rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 34rpx;
                        color: rgba(26, 194, 121, 1);

                    }
                }

            }

            .top3_box {
                height: 40rpx;
                /** 文本1 */
                font-size: 28rpx;
                font-weight: 400;
                letter-spacing: 0rpx;
                line-height: 40rpx;
                color: rgba(128, 128, 128, 1);
                margin-bottom: 18rpx;

            }
        }


    }
}
</style>